<nav class="navbar navbar-default navbar-fixed-top gn-top-bar" role="navigation"
     data-ng-if="!unsupportedSchema">

  <div class="navbar-text gn-tooltip"
     data-ng-mouseover="getSaveStatus()"
     title="{{savedStatus}}">
    <h1 title="{{gnCurrentEdit.mdTitle}}">
      {{gnCurrentEdit.mdTitle | limitTo: 50 }}
      {{gnCurrentEdit.mdTitle.length > 50 ? '...' : ''}}
    </h1>
    <span data-ng-if="savedStatus">| </span>
    <span data-ng-class="saveError ? 'text-danger' : ''">{{savedStatus}}</span>
  </div>

  <div class="gn-btn-toolbar navbar-right">
    <!-- If using the category selector in the editor form directly, remove this directive. -->
    <div data-gn-metadata-category-updater="mdCategories"
         data-gn-group-owner="groupOwner"
         data-metadata-uuid="gnCurrentEdit.uuid" title="{{'categories'|translate}}"/>

    <div data-gn-metadata-group-updater="groupOwner"
         data-metadata-id="gnCurrentEdit.id" title="{{'group'|translate}}"/>

    <div class="btn-group" data-ng-if="gnConfig.metadata.vcs.enable">
      <button class="btn btn-default navbar-btn dropdown-toggle"
              type="button"
              data-toggle="dropdown"
              aria-label="{{'tools' | translate}}"
              aria-expanded="true">
        <i class="fa fa-fw fa-cog"/>
        <span class="visible-lg" data-translate="">tools</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li role="menuitem">
          <a role="menuitem"
             tabindex="-1"
             data-gn-click-and-spin="startVersioning()"
             title="{{'startVersioning-help' | translate}}">
            <i class="fa fa-fw fa-history"/>
            <span data-translate="">startVersioning</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- /.btn-group -->

    <data-gn-md-validation-tools></data-gn-md-validation-tools>
    <!-- TODO: automatic save status -->
    <div class="btn-group">
      <button type="button" class="btn btn-default navbar-btn gn-tooltip"
              gn-click-and-spin="cancel()"
              id="gn-editor-btn-cancel"
              data-ng-mouseover="getCancelStatus()" title="{{cancelStatus}}">
        <i class="fa fa-fw fa-times"/>
        <span class="visible-lg" data-translate="">cancel</span>
      </button>
    </div>
    <div class="btn-group">
      <button type="button"
              class="btn btn-default navbar-btn"
              aria-label="{{'closeEditor' | translate}}"
              title="{{'closeEditor'|translate}}"
              gn-click-and-spin="close(false, false)"
              id="gn-editor-btn-close">
        <i class="fa fa-fw fa-sign-out"/>
        <span class="visible-lg" data-translate="">closeEditor</span>
      </button>
      <button type="button"
              class="btn btn-default navbar-btn dropdown-toggle"
              data-ng-if="((user.isEditorForGroup(gnCurrentEdit.metadata.groupOwner) || user.isAdmin()) && gnCurrentEdit.metadata.mdStatus == 1 && isMdWorkflowEnable) ||
              ((user.isReviewerForGroup(gnCurrentEdit.metadata.groupOwner) || user.isAdmin()) && gnCurrentEdit.metadata.mdStatus == 4)"
              aria-label="{{'showOptions' | translate}}"
              data-toggle="dropdown"
              aria-expanded="false">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" role="menu">
        <li role="menuitem" data-ng-if="(user.isEditorForGroup(gnCurrentEdit.metadata.groupOwner) || user.isAdmin()) && gnCurrentEdit.metadata.mdStatus == 1 && isMdWorkflowEnable">
          <a href=""
             title="{{'saveAndSubmit' | translate }}"
             data-gn-click-and-spin="close(true, false)">
            {{'saveAndSubmit' | translate}}
          </a>
        </li>
        <li role="menuitem" data-ng-if="(user.isReviewerForGroup(gnCurrentEdit.metadata.groupOwner) || user.isAdmin()) && gnCurrentEdit.metadata.mdStatus == 4">
          <a href=""
             title="{{'saveAndApprove' | translate }}"
             data-gn-click-and-spin="close(false, true)">
            {{'saveAndApprove' | translate}}
          </a>
        </li>
        </ul>
    </div>
    <!-- /.btn-group -->
    <div class="btn-group" title="{{(isTemplate() ? 'saveTemplate' : 'saveMetadata') | translate}}">
      <button type="button"
              data-gn-click-and-spin="save(true, false)"
              id="gn-editor-btn-save"
              aria-label="{{(isTemplate() ? 'saveTemplate' : (gnCurrentEdit.metadata.draft === 'y' ? 'saveDraft' : 'saveMetadata')) | translate}}"
              class="btn btn-default navbar-btn">
        <i class="fa fa-fw fa-save"/>
        <span class="visible-lg">{{(isTemplate() ? 'saveTemplate' : (gnCurrentEdit.metadata.draft === 'y' ? 'saveDraft' : 'saveMetadata')) | translate}}</span>
      </button>
      <button type="button"
              data-ng-disabled="gnCurrentEdit.metadata.draft === 'y'"
              class="btn btn-default navbar-btn dropdown-toggle"
              aria-label="{{'showOptions' | translate}}"
              title="{{(gnCurrentEdit.metadata.draft === 'y' ? 'draftCanNoBeATemplateOrMinorEdit' : 'showOptions') | translate}}"
              data-toggle="dropdown"
              aria-expanded="false">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" role="menu">
        <!-- A draft can not be a template -->
        <li role="menuitem"
            data-ng-show="user.canCreateTemplate()">
          <a href=""
             title="{{(isTemplate() ? 'saveAsMetadata' : 'saveAsTemplate') | translate}}"
             data-gn-click-and-spin="switchTypeAndSave(true)">
            {{(isTemplate() ? 'saveAsMetadata' : 'saveAsTemplate') | translate}}
          </a>
        </li>
        <!-- When editing an approved version, the editor open
        a draft copy. Saving it will not replaced the initial record
        and will update the draft. So minor edit does not make much sense
        as it will require another approval of the draft. -->
        <li class="dropdown-header"
            role="menuitem">
          <label title="{{'minorEditHelp' | translate}}">
            <input type="checkbox" data-ng-model="gnCurrentEdit.isMinor"/>
            {{'minorEdit' | translate}}
          </label>
        </li>
      </ul>
    </div>
    <!-- /.btn-group -->
    <div class="btn-group gn-view-menu-button">
      <!-- An empty drown down updated when form is loaded -->
      <button type="button"
              class="btn btn-default navbar-btn dropdown-toggle"
              data-toggle="dropdown"
              aria-label="{$i18n/selectView}"
              title="{$i18n/selectView}"
              aria-expanded="false">
        <i class="fa fa-eye"></i>
        <span class="caret"></span>
      </button>
    </div>
    <!-- /.btn-group -->
  </div>
  <!-- /.navbar-right -->
</nav>
